<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增题库管理')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: header('Summernote富文本编辑器')"/>
    <th:block th:include="include :: summernote-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-questions-add">
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">题目类型：</label>
                <div class="col-sm-8">
                    <select name="questionType" class="form-control" th:with="type=${@dict.getType('question_type')}"
                            required>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">题目：</label>
                <div class="col-sm-8">
                    <div class="ibox-content no-padding">
                        <div class="summernote" id="questionName" required>
                        </div>
                        <!-- 用于存储富文本编辑器内容的隐藏字段 -->
                        <input type="hidden" name="questionName" id="questionNameContent">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">答案：</label>
                <div class="col-sm-8">
                    <div class="ibox-content no-padding">
                        <div class="summernote" id="answer" required>
                        </div>
                        <!-- 用于存储富文本编辑器内容的隐藏字段 -->
                        <input type="hidden" name="answer" id="answerContent">
                        <i class="fa fa-info-circle">
                        </i>
                        单项或多项选择题多个选项用英文";"分开
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">正确答案：</label>
                <div class="col-sm-8">
                    <div class="ibox-content no-padding">
                        <div class="summernote" id="correctAnswer" required>
                            <!-- 用于存储富文本编辑器内容的隐藏字段 -->
                            <input type="hidden" name="correctAnswer" id="correctAnswerContent">
                        </div>
                        <i class="fa fa-info-circle">
                        </i>
                        单项或多项选择题多个选项用英文";"分开
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">难度：</label>
                <div class="col-sm-8">
                    <select name="difficulty" class="form-control" th:with="type=${@dict.getType('difficulty')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">教材页码：</label>
                <div class="col-sm-8">
                    <input name="pageNumber" class="form-control" type="text">
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">来源：</label>
                <div class="col-sm-8">
                    <input name="source" class="form-control" type="text">
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <textarea name="note" class="form-control"></textarea>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">解题思路：</label>
                <div class="col-sm-8">
                    <textarea name="solution" class="form-control"></textarea>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: summernote-js"/>
<script th:inline="javascript">
    $(document).ready(function () {
        // 初始化所有 Summernote 编辑器
        $('.summernote').each(function () {
            var $editor = $(this); // 当前 Summernote 编辑器实例

            $editor.summernote({
                lang: 'zh-CN',
                fontNames: ['Times New Roman', 'Arial', 'Courier New', 'Comic Sans MS'],
                fontNamesIgnoreCheck: ['Times New Roman'],
                defaultFontName: 'Times New Roman',
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['fontname', 'fontsize']],
                    ['insert', ['picture', 'formula']], // 添加图片按钮
                    ['misc', ['superscript', 'subscript']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ],
                callbacks: {
                    onInit: function () {
                        // 动态加载数据
                        var hiddenFieldId = $editor.attr('id') + 'Content';
                        $editor.summernote('code', $('#' + hiddenFieldId).val());
                    },
                    onImageUpload: function (files) {
                        // 上传图片到后端
                        for (var i = 0; i < files.length; i++) {
                            uploadImage(files[i], $editor);
                        }
                    }
                }
            });

            // 设置编辑器默认字体为 Times New Roman
            $editor.next('.note-editor').find('.note-editable').css('font-family', 'Times New Roman');
        });

        // 图片上传函数
        function uploadImage(file, $editor) {
            var formData = new FormData();
            formData.append('file', file); // 文件字段名称为 'file'

            $.ajax({
                url: prefix + '/image', // 后端图片上传接口
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    if (response.success) {
                        // 将图片 URL 插入到当前编辑器中
                        $editor.summernote('insertImage', response.url);
                    } else {
                        alert('图片上传失败：' + response.message);
                    }
                },
                error: function () {
                    alert('图片上传失败，请检查网络或服务器配置。');
                }
            });
        }
    });

    var prefix = ctx + "question/questions"
    $("#form-questions-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            // 获取富文本编辑器中的内容并存入隐藏字段
            var questionName = $('#questionName').summernote('code'); // 获取富文本编辑器的内容
            $('#questionNameContent').val(questionName); // 将内容赋值给隐藏字段

            // 获取富文本编辑器中的内容并存入隐藏字段
            var answer = $('#answer').summernote('code'); // 获取富文本编辑器的内容
            $('#answerContent').val(answer); // 将内容赋值给隐藏字段

            // 获取富文本编辑器中的内容并存入隐藏字段
            var correctAnswer = $('#correctAnswer').summernote('code'); // 获取富文本编辑器的内容
            $('#correctAnswerContent').val(correctAnswer); // 将内容赋值给隐藏字段

            $.operate.save(prefix + "/add", $('#form-questions-add').serialize());
        }
    }

    $("input[name='createdAt']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='updatedAt']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
</script>
</body>
</html>